<template>
    <el-container>
      <el-header>
        <el-checkbox  v-model="includeOptData">包含操作数据</el-checkbox>
        <el-checkbox  v-model="selectedData">勾选数据</el-checkbox>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <el-button type="info" icon="el-icon-d-arrow-left" @click="goHome" circle></el-button>
        <el-button type="info" icon="el-icon-check" @click="selectAll" circle></el-button>
        <el-button type="primary" @click="submitData" :underline="false" circle>提</el-button>
        <el-button type="info"  @click="loadMoreImage" :underline="false" circle>...</el-button>
        <el-button type="warning" icon="el-icon-download" @click="exportImage" circle></el-button>
        <el-input-number v-model="resultSkip" @change="gotoSkip" ></el-input-number>
        <span>偏移量：{{skip+limit}} ，当前目录：{{currentDir}}，总计:{{total}}</span>
      </el-header>
      <el-container>
        <el-aside width="500px"><el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree></el-aside>
        <el-main >

          <div  v-for="image in images">

            <el-card class="box-card" :id="image.id" v-if="image.selected"
                     style="width: 150px;border-color:orangered;background-color:grey;height:200px;float: left;padding-bottom: 20px;margin-bottom: 20px">
              <div slot="header" >
                <el-button style="float: right;width: 100%; padding: 3px 0" type="text" @click="selectCard(image.id)">选择</el-button>
              </div>
              <el-image :src="image.url"
                        :preview-src-list="imagesUrl" fit="fill"></el-image>
            </el-card>

            <el-card class="box-card" :id="image.id" v-if="!image.selected"
                     style="width: 150px;height:200px;float: left;padding-bottom: 20px;margin-bottom: 20px">
              <div slot="header" >
                <el-button style="float: right;width: 100%; padding: 3px 0" type="text" @click="selectCard(image.id)">选择</el-button>
              </div>
              <el-image :src="image.url"
                        :preview-src-list="imagesUrl" fit="fill"></el-image>
            </el-card>
          </div>


        </el-main>
      </el-container>
      <el-footer>
        <el-checkbox  v-model="includeOptData">包含操作数据</el-checkbox>
        <el-checkbox  v-model="selectedData">勾选数据</el-checkbox>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <el-button type="info" icon="el-icon-d-arrow-left" @click="goHome" circle></el-button>
        <el-button type="info" icon="el-icon-check" @click="selectAll" circle></el-button>
        <el-button type="primary" @click="submitData" :underline="false" circle>提</el-button>
        <el-button type="info"  @click="loadMoreImage" :underline="false" circle>...</el-button>
        <el-button type="warning" icon="el-icon-download" @click="exportImage" circle></el-button>
        <el-input-number v-model="resultSkip" @change="gotoSkip" ></el-input-number>
        <span>偏移量：{{skip+limit}} ，当前目录：{{currentDir}}，总计:{{total}}</span>
      </el-footer>
    </el-container>
</template>

<script>

import {wechat_getTreeData,getListImage,submitImageData,exportImageData} from '../../api/wechat_image';
export default {
  name: "wechat_image",
  data(){
    return {
      skip:0,
      resultSkip:0,
      total:0,
      limit:100,
      moreOver:false,
      currentDir:'',
      selectAllValue:false,
      includeOptData:false,
      selectedData:false,
      name:'',
      treeData:[],
      images:[],
      imagesUrl:[],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      url:'http://127.0.0.1:8083/image/item?image=',
      fit:'fill'
    }
  },
  mounted() {
    this.getTreeData();
  },
  methods:{
    goHome(){
      this.$router.push('../home')
    },
    handleNodeClick(data) {
      if(data.dir){
        this.getListImage(data.dir);
      }
    },
    getTreeData(){
      wechat_getTreeData.r({path:''}).then(data=>{
        let me = this ;
        if(data.status == 200){
          data.data.data.forEach(item=>{
            if(item.file){
              me.treeData.push({label:item.name,dir:item.name})
            }else{
              let node = {label:item.name,children:[]} ;
              wechat_getTreeData.r({path:item.name}).then(cdata=>{
                if(cdata.status == 200){
                  cdata.data.data.forEach(citem=>{
                    node.children.push({label:citem.name,dir:item.name+"/"+citem.name})
                  })
                  me.treeData.push(node)
                }
              })
            }
          })
        }
      });
    },
    getListImage(dir){
      this.images = [];
      this.imagesUrl=[];
      this.currentDir = dir ;
      this.skip = 0 ;
      this.moreOver = false ;
      this.requestGetImage(dir,this.skip,this.limit);
    },
    loadMoreImage (){
      if(!this.moreOver){
        this.skip += this.limit;
        this.requestGetImage(this.currentDir,this.skip,this.limit);
      }
    },
    requestGetImage(path,skip,limit){
      let me = this ;
      getListImage.r({path:path,skip:skip,limit:limit,includeOptData:this.includeOptData,selectedData:this.selectedData}).then(data=>{
        if(data.status == 200){
          if(data.data.data.length < limit){
            me.moreOver = true ;
          }
          data.data.data.forEach(item=>{
            let imageTemp = {
              url:'http://127.0.0.1:8083/image/item?image='+item.name+"&dir="+path,
              dir:path,
              id:item.name,
              exported:item.exported,
              crtDate:item.crtDate,
              selected:item.selected
            };
            me.imagesUrl.push(imageTemp.url);
            me.images.push(imageTemp);
          })
          me.resultSkip = data.data.resultSkip;
          me.total = data.data.total;
        }
      })
    },
    selectCard(image){
      this.images.forEach(item=>{
        if(item.id == image){
          item.selected = item.selected?false:true ;
        }
      })
    },
    selectAll(){
      let me = this;
      this.selectAllValue = this.selectAllValue?false:true;
      this.images.forEach(item=>{
          item.selected = me.selectAllValue ;
       })
    },
    submitData(){
      let data = JSON.stringify(this.images);
      let me = this;
      submitImageData.r(this.images).then(data=>{
        this.$message({
          showClose: true,
          message: '提交成功！'
        });
        me.getListImage(me.currentDir);
      })
    },
    gotoSkip(){
      this.images = [];
      this.imagesUrl=[];
      this.currentDir = this.currentDir ;
      this.skip = this.resultSkip ;
      this.moreOver = false ;
      this.requestGetImage(this.currentDir,this.skip,this.limit);
    },
    exportImage(){
      let data = JSON.stringify(this.images);
      let me = this;
      exportImageData.r(this.images).then(data=>{
        this.$message({
          showClose: true,
          message: '提交成功！'
        });
        me.getListImage(me.currentDir);
      })
    }
  }
}
</script>

<style scoped>
/deep/ .el-alert__content{
  margin-left: 0px;
}
/deep/ .el-card{
  width: 150px;
  margin: 0px 0px ;
  padding: 0px 0px;
}
</style>